<template>
  <div class="Rire flex ">
    <div class="flex flex2 JustifyContentC " style="padding: 6rem 0;">
      <div class="flexC JustifyContentSA" style="padding: 1rem 0;">
        <div><img src="@/assets/img/components/15.png" alt="" style="width: 1.75rem; height: 5.375rem;"/></div>
        <div><img src="@/assets/img/components/16.png" alt="" style="width: 1.75rem; height: 7.75rem;"/></div>
        <div><img src="@/assets/img/components/15.png" alt="" style="width: 1.75rem; height: 5.39375rem;" /></div>
        <div></div>
      </div>
      <div class="flexC JustifyContentSA">
        <div class="font_s40 nac_left flex JustifyContentC AlignItemsC"><p>智能发现</p></div>
        <div class="flex font_s24 colorF JustifyContentSB" style="font-weight:400; padding: 0rem 0.5rem;">
          <p>
            <img src="@/assets/img/components/14.png" alt="" />数据分析发现
          </p>
          <p>
            <img src="@/assets/img/components/14.png" alt="" />互联网移动端发现
          </p>
        </div>
        <div class="font_s40 nac_left flex JustifyContentC AlignItemsC"><p>信访投诉</p></div>
        <div class="flexC font_s24 colorF JustifyContentSB" style="font-weight:400;  padding: 0rem 0.5rem;">
          <div class="flex JustifyContentSB">
            <p>
              <img src="@/assets/img/components/14.png" alt="" />12345工单
            </p>
            <p>
              <img src="@/assets/img/components/14.png" alt="" />来信来访
            </p>
          </div>
          <div style="padding: 0.5rem;"></div>
          <div class="flex JustifyContentSB">
            <p>
              <img src="@/assets/img/components/14.png" alt="" />街镇反映
            </p>
            <p>
              <img src="@/assets/img/components/14.png" alt="" />行业反映
            </p>
          </div>
        </div>
        <div class="font_s40 nac_left flex JustifyContentC AlignItemsC"><p>两会议案</p></div>
        <div class="flex font_s24 colorF JustifyContentSB" style="font-weight:400;  padding: 0rem 0.5rem;">
          <p>
            <img src="@/assets/img/components/14.png" alt="" />人大意见
          </p>
          <p>
            <img src="@/assets/img/components/14.png" alt="" />政协提案
          </p>
        </div>
        <div class="font_s40 nac_left flex JustifyContentC AlignItemsC"><p>市医保监督所推送</p></div>
      </div>
    </div>
    <div class="flex flex2 JustifyContentC " style="padding: 6rem 0;">
      <div class="flexC JustifyContentSB">
        <div class="scaleDraw"><img src="@/assets/img/components/laiyuan.png" alt="" /></div>
        <div class="scaleDraw"><img src="@/assets/img/components/laiyuan2.png" alt="" /></div>
      </div>
      <div class="flex JustifyContentC AlignItemsC">
        <div class=" nav_con">
          <div class=" r_icon_pa">
            <div class="r_icon zhengzhuan"></div>
            <img class="r_icon_pa_a" src="@/assets/img/components/06.png" alt="" />
          </div>
          <div class="r_icon_pa1">
            <div class="r_icon zhengzhuan  "></div>
            <img class="r_icon_pa1_b" src="@/assets/img/components/07.png" alt="" />
          </div>
          <div class="r_icon_pa2">
            <div class="r_icon fanzhuan  "></div>
            <img class="r_icon_pa2_c" src="@/assets/img/components/08.png" alt="" />
          </div>
        </div>
      </div>
      <div class="flexC JustifyContentSA " style="padding-top: 5rem;">
        <div class="animation"><img src="@/assets/img/components/jiantou.png" alt="" /></div>
        <div class="animation"><img src="@/assets/img/components/jiantou.png" alt="" /></div>
        <div class="animation"><img src="@/assets/img/components/jiantou.png" alt="" /></div>
        <div class="animation"><img src="@/assets/img/components/jiantou.png" alt="" /></div>
        <div class="animation"><img src="@/assets/img/components/jiantou.png" alt="" /></div>
        <div class="animation"><img src="@/assets/img/components/jiantou.png" alt="" /></div>
      </div>
    </div>
    <div class="flexC flex2 AlignItemsC font_s40" style="padding: 6rem 0;">
      <div class=" flexC  JustifyContentSA  AlignItemsC " style="width:70%;height:100%; border:2px solid rgba(114,246,248,1);">
        <img src="@/assets/img/components/13.png" style="margin-top:-2.3rem ;" alt="" />
        <div class="nac_right flex JustifyContentC AlignItemsC"><p>整改</p></div>
        <div class="nac_right flex JustifyContentC AlignItemsC"><p>约谈</p></div>
        <div class="nac_right flex JustifyContentC AlignItemsC"><p>追款</p></div>
        <div class="nac_right flex JustifyContentC AlignItemsC"><p>暂停新增服务</p></div>
        <div class="nac_right flex JustifyContentC AlignItemsC"><p>暂停结算</p></div>
        <div class="nac_right flex JustifyContentC AlignItemsC"><p>终止协议</p></div>
      </div>
    </div>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
.Rire {
  width: 100%;
  height: 90%;
  .nac_left {
    width: 28.3125rem;
    height: 5.3125rem;
    background: url(../../../assets/img/components/11.png) no-repeat center;
    background-size: 100% 100%;
  }
  .nac_left > p {
    font-weight: bold;
    line-height: 3.125rem;
    color: #36d5fc;
  }
  .nav_con {
    width: 30rem;
    height: 30rem;
    background: url(../../../assets/img/components/04.png) no-repeat center;
    background-size: 100% 100%;
  }
  .nac_right {
    width: 20.875rem;
    height: 5.5625rem;
    background: url(../../../assets/img/components/12.png) no-repeat center;
    background-size: 100% 100%;
  }
  .nac_right p {
    font-weight: bold;
    color: #36d5fc;
  }
  .r_icon {
    width: 15.25rem;
    height: 16.4375rem;
    background: url(../../../assets/img/components/05.png) no-repeat center;
    background-size: 100% 100%;
  }
  .r_icon_pa {
    position: relative;
    top: 23%;
    left: -13%;
    .r_icon_pa_a {
      position: absolute;
      top: 24%;
      left: 12%;
      width: 8.375rem;
      height: 8.375rem;
    }
  }
  .r_icon_pa1 {
    position: relative;
    top: -65%;
    left: 42%;
    .r_icon_pa1_b {
      position: absolute;
      top: 24%;
      left: 12%;
      width: 8.375rem;
      height: 8.375rem;
    }
  }
  .r_icon_pa2 {
    position: relative;
    top: -53%;
    left: 42%;
    .r_icon_pa2_c {
      position: absolute;
      top: 24%;
      left: 12%;
      width: 8.375rem;
      height: 8.375rem;
    }
  }
  /*向右移动*/
  .arrows {
    animation: translateXMove 1s linear infinite;
    -webkit-animation: translateXMove 1s linear infinite; /* Safari and Chrome */
    -moz-animation: translateXMove 1s linear infinite;
  }
  @keyframes translateXMove {
    0% {
      transform: translateX(-0.5rem);
      -ms-transform: translateX(-0.5rem);
      -webkit-transform: translateX(-0.5rem);
      -moz-transform: translateX(-0.5rem);
    }
    50% {
      transform: translateX(0.5rem);
      -ms-transform: translateX(0.5rem);
      -webkit-transform: translateX(0.5rem);
      -moz-transform: translateX(0.5rem);
    }
    100% {
      transform: translateX(-0.5rem);
      -ms-transform: translateX(-0.5rem);
      -webkit-transform: translateX(-0.5rem);
      -moz-transform: translateX(-0.5rem);
    }
  }
  // 无限放大缩小
  .scaleDraw {
    animation: scaleDraw 5s ease-in-out infinite;
  }
  @keyframes scaleDraw {
    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.1); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.1);
    }
  }
  // 箭头右走
  .animation {
    animation: animation 3s linear infinite;
  }
  @keyframes animation {
    from {
      transform: translateX(0rem);
    }
    to {
      transform: translateX(5rem);
    }
  }
  /* 圆环 */
  .zhengzhuan {
    animation: App-logo-spin infinite 20s linear;
  }
  .fanzhuan {
    animation: App-logo-spinF infinite 20s linear;
  }
  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
  @keyframes App-logo-spinF {
    from {
      transform: rotate(360deg);
    }

    to {
      transform: rotate(0deg);
    }
  }
}
</style>
